<template>
  <el-dialog v-if="load" :close-on-click-modal="false" title="历史采购订单价格" v-model="visible" align-center width="1500" class="full" @close="handleClose">
    <div class="my-2 flex flex-wrap items-center gap-5">
      <div>
        <VText title="sku" :value="form.sku" />
      </div>
      <div>
        <VText title="产品名称" :value="form.sku_name" />
      </div>
    </div>
    <div style="">
      <el-tabs v-model="form.activeName" @tab-change="handleChange">
        <el-tab-pane label="系统历史采购数据" name="base">
          <div style="height: 660px;">
            <VTable ref="tableRef" v-bind="tableOptions" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="赛盒历史采购数据" name="saihe">
          <Saihe :data="form.saiheList" size="small" />
        </el-tab-pane>
        <el-tab-pane label="系统历史备料数据" name="plan">
          <Plan ref="planRef" :sku="form.sku" size="small" />
        </el-tab-pane>
      </el-tabs>
    </div>
    <template #footer>
      <el-button @click="close">关 闭</el-button>
    </template>
  </el-dialog>
  <Add ref="addRef" />
  <Tracking ref="trackingRef" />
</template>

<script setup lang="jsx">
import api from './api'
import Add from './components/Add'
import Tracking from './components/Tracking'
import Saihe from './Saihe'
import Plan from './Plan'

const emit = defineEmits(['close', 'success'])

const load = ref(false)
const visible = ref(false)

const form = ref({})
const addRef = ref()
const trackingRef = ref()
const planRef = ref()

const handleChange = name => {
  if (name === 'saihe' && !form.value.saiheList?.length) {
    api.saiheHistory({ sku: form.value.sku, pageSize: 50, pageNum: 1 }).then(res => {
      form.value.saiheList = res.data
    })
  }
  if (name === 'plan' && !form.value.planList?.length) {
    planRef?.value.query()
  }
}

// 列表配置
const tableOptions = reactive({
  size: 'small',
  rowConfig: { height: 80 },
  columns: [
    {
      minWidth: 140, slots: {
        header: () => <div>采购单号<br />订单状态<br />发货仓</div>,
        default: ({ row }) => {
          return <div>
            <VText value={row.purchase_no} type="button" onClick={() => addRef?.value.open(row.p_id)} />
            <VText value={row.audit_status_name} />
            <VText value={row.destination_warehouse_name} />
          </div>
        }
      }
    },
    {
      field: 'department_name', title: '需求部门', minWidth: 120, line: 2
    },
    {
      minWidth: 140, title: '数量信息', slots: {
        default: ({ row }) => {
          return <div class="grid grid-cols-2 gap-x-3">
            <VText title="需求" value={row.demand_num} />
            <VText title="下单" value={row.purchase_num} />
            <VText title="收货" value={row.deliver_num} />
            <VText title="入库" value={row.inbound_num} />
          </div>
        }
      }
    },
    {
      minWidth: 90, slots: {
        header: () => <div>国家<br />目的仓</div>,
        default: ({ row }) => {
          return <div>
            <VText value={row.country_name} />
            <VText value={row.demand_destination_warehouse_name} />
          </div>
        }
      }
    },
    {
      minWidth: 110, slots: {
        header: () => <div>采购员<br />计划人员</div>,
        default: ({ row }) => {
          return <div>
            <VText value={row.purchase_user_name} />
            <VText value={row.plan_user_name} />
          </div>
        }
      }
    },
    {
      minWidth: 240, slots: {
        header: () => <div>销售</div>,
        default: ({ row,rowIndex }) => {
          return <VMore key={rowIndex}>
            {{
              default: (line) => (row.sale || []).map(d => <div class='w-full'>
                <VText value={(row.sale || []).map(d => `${d.sale_name}: 需求${d.purchase_num},入库${d.inbound_num}`).join(';')} />
              </div>)
            }}
          </VMore>
        }
      }
    },
    {
      minWidth: 120, slots: {
        header: () => <div>采购未税价<br />采购未税报价<br />含税单价</div>,
        default: ({ row }) => {
          return <div>
            <VText value={row.unit_untaxed_price} />
            <VText value={row.unit_price} />
            <VText value={row.unit_price_tax} />
          </div>
        }
      }
    },
    {
      minWidth: 120, 
      slots: {
        header: () => <div>本地仓加权采购成本(深圳)<br />运费成本分摊</div>,
        default: ({row}) => {
          return <div>
            <VText value={row.weighted_cost} />
            <VText value={row.tracking_price} />
          </div>
        }
      }
    },
    {
      minWidth: 140, slots: {
        header: () => <div>需求时间<br />下单时间<br />完结时间</div>,
        default: ({ row }) => {
          return <div>
            <VText value={row.demand_time} />
            <VText value={row.create_time} />
            <VText value={row.complete_time} />
          </div>
        }
      }
    },
    {
      minWidth: 140, slots: {
        header: () => <div>预计到货时间<br />最后收货时间<br />最后入库时间</div>,
        default: ({ row }) => {
          return <div>
            <VText value={row.expect_delivery_time} />
            <VText value={row.deliver_time} />
            <VText value={row.inbound_time} />
          </div>
        }
      }
    },
    {
      minWidth: 100, slots: {
        header: () => <div>物流信息</div>,
        default: ({ row, rowIndex }) => {
          return <VMore key={rowIndex}>
            {{
              default: (line) => (row.tracking_data || []).map(d => <div class='w-full'>
                <VText type='button' value={d.tracking_no} line={line}
                  onClick={() => trackingRef?.value.open(d)} />
              </div>)
            }}
          </VMore>
        }
      }
    },
  ],
  proxyConfig: {
    autoLoad: false,
    ajax: {
      query: ({ page, form:f }) => api.history({ ...f, ...page, sku: form.value.sku }).then(res => {
        const {list: data, total, sku, sku_name} = res.data
        form.value = {sku, sku_name, activeName: 'base', saiheList: []}
        return { data, total }
      })
    }
  }
})

// 打开弹窗
const tableRef = ref()
const open = async (sku, country) => {
  if (!load.value) {
    load.value = true
    await 1
  }
  form.value = { activeName: 'base', sku }
  visible.value = true
  nextTick(() => {
    tableRef.value.query()
  })
}
// 关闭弹窗
const close = () => {
  visible.value = false
}

const handleClose = () => {
  emit('close')
}

defineExpose({ open })
</script>